<template>
    <div class="Login">
        <a-row style="height: 100%">
            <a-col :span="12"></a-col>
            <a-flex :span="12" justify="center" align="center">
                <a-card hoverable title="登录" :bordered="true" style="width: 500px; cursor: auto">
                    <a-form
                        ref="formRef"
                        :model="formState"
                        :rules="rules"
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 20 }"
                        autocomplete="off"
                    >
                        <a-form-item label="用户名" name="userName">
                            <a-input v-model:value="formState.userName" />
                        </a-form-item>

                        <a-form-item label="密码" name="password">
                            <a-input-password v-model:value="formState.password" />
                        </a-form-item>

                        <a-form-item
                            label=""
                            name="remember"
                            :wrapper-col="{ offset: 4, span: 16 }"
                        >
                            <a-checkbox v-model:checked="formState.remember"
                                >Remember me</a-checkbox
                            >
                        </a-form-item>

                        <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
                            <a-button
                                style="width: 100%"
                                type="primary"
                                size="large"
                                @click="onSubmit"
                                >登录</a-button
                            >
                        </a-form-item>
                    </a-form>
                    <a-row style="color: #aaaaaa"> 本系统供内部使用，使用请联系管理员 </a-row>
                </a-card>
            </a-flex>
        </a-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import type { Ref } from 'vue'
import Lodash from 'lodash'

import { toast } from '@/utils/common'
import useMainStore from '@/stores/index'

import { login } from './store'

const defaultFormState = {
    userName: '',
    password: '',
    remember: false
}

export default defineComponent({
    name: 'Login',
    components: {},
    setup() {
        const router = useRouter()
        const userStore = useMainStore().useUserStore()

        const components = {
            formRef: ref<FormInstance>()
        } as {
            formRef: Ref<FormInstance>
        }
        const constant = {
            rules: {
                userName: [
                    {
                        required: true,
                        message: 'Please input your userName!'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: 'Please input your password!'
                    }
                ]
            }
        }
        const state = reactive({
            formState: Lodash.cloneDeep(defaultFormState)
        })

        const methods = {
            async onSubmit() {
                if (!state.formState.remember) {
                    toast('error', '', '请勾选!')
                    return
                }
                try {
                    const params = Lodash.cloneDeep(state.formState) //深拷贝防止数据污染
                    await components.formRef.value.validateFields()
                    const res: any = await login(params)
                    if (res.status === 200) {
                        userStore.setToken(res.result.token)
                        router.push({ path: '/' })
                    } else {
                        toast('error', '', res.result.msg)
                    }
                } catch (err: any) {
                    console.log(err)
                } finally {
                }
            }
        }
        return {
            ...toRefs(state),
            ...components,
            ...methods,
            ...constant
        }
    }
})
</script>
<style lang="scss" scoped>
.Login {
    height: 100vh;
    width: 100vw;
    background-color: #f5f5f5;
}
</style>
